<!--  -->
<template>
  <div class='main'>

    <h2>
      校友信息查找
    </h2>

     <div id="search-card">

          <div id="search-content">

                 <el-form v-model="search" :inline="true">
                   <el-form-item label="校友编号:">
                     <el-input v-model="search.userId" />
                   </el-form-item>

                   <el-form-item label="姓名">
                     <el-input v-model="search.userName" />
                   </el-form-item>

                   <el-form-item label="学部">
                     <el-select v-model="search.partName" placeholder="学部">
                       <el-option label="信息学部" value="信息学部" />
                       <el-option label="不限制" value="" />
                     </el-select>
                   </el-form-item>

                   <el-form-item label="级别">
                     <el-input v-model="search.level" />
                   </el-form-item>

                   <el-form-item label="班级">
                     <el-input v-model="search.className" />
                   </el-form-item>

                     <el-form-item>
                       <el-button type="primary" style="margin-left:10px" @click="conditionQuery">查找</el-button>
                     </el-form-item>


                   </el-form>
               </div>
     </div>


    <div id="table-area">
          <el-table
            v-loading="listLoading"
            :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
          >
            <el-table-column
              align="center"
              prop="userId"
              label="校友编号"
            />

            <el-table-column
              align="center"
              prop="userName"
              label="校友姓名"
            />

            <el-table-column
              align="center"
              prop="userLevel"
              label="级别"
            />

            <el-table-column
              align="center"
              prop="userPartName"
              label="学部"
            />

            <el-table-column
              align="center"
              prop="userClassName"
              label="班级"
            />


            <el-table-column
              align="center"
              prop="userUpdateTime"
              label="更新日期"
            />


            <el-table-column align="center" label="操作" width="200">
              <template slot-scope="Scope">
                <el-button type="primary" icon="el-icon-search" @click="getUserInfo(Scope.row.userId)" size="mini">详细</el-button>
                <el-button type="warning" icon="el-icon-edit" @click="editUserInfo(Scope.row.userId)" size="mini">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div id="pages">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[5,10]"
              :page-size="pagesize"
              layout="total, sizes,prev, pager, next"
              :total="list.length"
              prev-text="上一页"
              next-text="下一页"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>

        </div>


        <alumnus-info ref="info"  :userId='userId' :show='show'></alumnus-info>





  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
  import {getUserInfoByUserPartToken,conditionSearchUserInfo} from '../../api/userInfo.js'
  import Info from '../../components/user/info.vue'
  export default {
    data() {
      //这里存放数据
      return {
          currentPage: 1, // 默认显示页面为1
          pagesize: 5, //    每页的数据条数
          list: [],
          listLoading: true,
          userId:'',
          show:false,
          dialogFormVisible:false,
          search:{}
      }
    },
    components: {
      'alumnus-info':Info
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      // 每页下拉显示数据
          handleSizeChange: (size)=> {
            this.pagesize = size
          },
          // 点击第几页
          handleCurrentChange: (currentPage)=> {
            this.currentPage = currentPage
          },
          handleClick(row) {
            console.log(row)
          },
          getUserInfo(userId){
            console.log(userId)
            this.$refs.info.showInfo(userId)
          },
          editUserInfo(userId){
            this.$refs.info.editInfo(userId)
          },
          conditionQuery(){
            conditionSearchUserInfo(this.search).then((resp)=>{
              this.list=resp.obj
            })
          }






    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
      getUserInfoByUserPartToken().then((data)=>{
        this.list=data.obj
        this.listLoading=false
      })
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},

  }
</script>
<style scoped>
  #main{
          margin-left: 5px;
          margin-right: 5px;
      }
    #search-card {
        line-height: 0px;
        text-align: center;
        margin: 0 auto;
        margin-top: 50px;
        width: 100%;
        height: 100px;
        overflow-x: hidden;
      }

    #table-area{
        margin-left: 10px;
        margin-right: 10px;
    }
</style>
